<template>
  <div
    class="custom_swipe"
    v-if="item.data"
    :style="{
      height:
        item.height === '100%'
          ? '100%'
          : ((parseFloat(item.height) || 170) + 10) / 23.44 + 'rem',
    }"
  >
    <div
      class="custom_swipe_background"
      v-if="
        typeof item.showBackground !== 'undefined' ? item.showBackground : true
      "
    ></div>
    <van-swipe
      :class="item.showBackground ? 'on' : ''"
      :width="item.width || '100%'"
      :autoplay="typeof item.speed !== 'undefined' ? item.speed : 3000"
      :loop="true"
      :lazy-render="false"
      :height="item.height || 170"
      :vertical="item.vertical || false"
      :show-indicators="
        typeof item.showDock !== 'undefined' ? item.showDock : true
      "
      :ref="item.ref || 'swipe'"
      @change="changeHandle"
    >
      <van-swipe-item
        v-for="(swipeItem, swipeIndex) in item.data"
        :key="'swipe_index_' + swipeIndex"
        :style="{ height: (item.height || 170) / 23.44 + 'rem' }"
        :ref="'swipe_index_' + swipeIndex"
      >
        <a
          :href="swipeItem.url"
          target="_blank"
          class="custom_swipe_item"
          v-if="!item.isTask"
          ><img :src="swipeItem.image" v-lazy="swipeItem.image"
        /></a>
        <slot
          name="swipeItem"
          :item="item"
          :swipeItem="swipeItem"
          :index="swipeIndex"
        ></slot>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
export default {
  name: "swipe",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      currentItem: null,
    };
  },
  mounted() {
    console.log(this.$props.item);
    this.$on("next", this.nextHandle);
    (this.$refs[this.$props.item.ref] || this.$refs["swipe"]).swipeTo(
      this.$props.item.defaultIndex || 0
    );
  },
  watch: {
    "$props.item.defaultIndex"(v) {
      console.log(v);
      this.$refs[this.$props.item.ref].swipeTo(v);
    },
  },
  methods: {
    changeHandle(index) {
      this.$parent.$emit("changeHandle", index);
    },
    nextHandle() {
      (this.$refs[this.$props.item.ref] || this.$refs["swipe"]).next();
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_swipe {
  background-color: #fff;
  position: relative;
  .custom_swipe_background {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    background-image: linear-gradient(0deg, #f1503b, #c82519 50%);
  }
  .van-swipe {
    &.on {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    .van-swipe__indicators {
      bottom: (30 / @base);
      .van-swipe__indicator--active {
        background-color: #f1503b;
      }
    }
    .van-swipe-item {
      .custom_swipe_item {
        background-color: #999;
        box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
        height: 100%;
        border-radius: (5 / @base);
        overflow: hidden;
        margin: (5 / @base);
        display: block;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
